<template>
  <div class="container">
    <data-view
      ref='dataView'
      propViewKey="dept_auto_transfer"
      :propFlowKey="propFlowKey"
      :propCustomCols="cpCustomColumns"
      :propShowToolBar="true"
      @extra-button-click="extraButtonClick"
      :propPreQueryWrapper="$newWrapper().eq('flagTransfer','1').ne('ifnull(apply_type,1)', '2').like('ref_type', 'dept').isNull('ref_id')"
    >
      <template #burnOutTime="{row}">
        <div class="burnout" @keyup.native="handleRowChange(row)" :style="getBorder(row)">
          <div :style="getColorAndProcess(row)">
            {{row.skuQtyDaily ? '' : noConfigMsg}}
          </div>
        </div>
        {{row.skuQtyDaily ? row.skuQtyStock / row.skuQtyDaily * 24 : '--'}}h
      </template>
    </data-view>
  </div>
</template>
<script>
import { ColorPicker } from 'element-ui'

export default {
  name: 'applyauto',
  data() {
    return {
      noConfigMsg: '未配置仓库日消耗',
      isCenter: true
    }
  },
  components: {

  },
  methods: {
    extraButtonClick(para) {
      let {key: buttonKey} = para.button
      if (buttonKey == 'cp_all_respond') { //客户端操作
        if (!this.utilDataview.checkWarehouse(this, true)) return

        let applyAutos = para.data.filter(o => o.refId == null)
        if (applyAutos instanceof Array) {
          if (applyAutos.length == 0) {
            this.utilMessage.error('请先选择请领单')
            return false
          }
        }
        this.autoRespond(applyAutos)
      }
      if (buttonKey == 'cp_respond') {
        if (!this.utilDataview.checkWarehouse(this, true)) return

        let applyAutos = []
        applyAutos.push(para.data)
        if (applyAutos instanceof Array) {
          if (applyAutos.length == 0) {
            this.utilMessage.error('请先选择请领单')
            return false
          }
        }
        this.autoRespond(applyAutos)
      }
      if (buttonKey == 'item_invalid') { //客户端操作
        if (!this.utilDataview.checkWarehouse(this, true)) return

        let applyAutos = para.data.filter(o => o.refId == null)
        if (applyAutos instanceof Array) {
          if (applyAutos.length == 0) {
            this.utilMessage.error('请先选择请领单')
            return false
          }
        }
        this.respondClose(applyAutos)
      }
    },
    autoRespond(applyAutos) {
      const params = {
        targetStatus: '1',
        applyAutos
      }
      if (applyAutos.some(target => target.deptId != applyAutos[0].deptId)) {
        global.utilMessage.alertFail('您所选中的多条响应明细中的“需求科室”不一致，无法响应！')
        return false
      }
      let that = this
      this.utilVue.loadShow(true)
      this.$ajax.post('/dept/apply_auto/toTransfer', params).then(resp => {
        this.utilVue.loadHide()
        if (resp.code == 0) {
          that.$confirm(`响应成功，生成调拨单数量:${resp.data.length}，是否打开第一个调拨单？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            // global.utils.openForm({
            //   routeName: 'wm/transfer',
            //   url: 'wm/transfer/index.vue',
            //   para: {id: resp.data[0].id, propFlowKey: 'wm_dist'},
            //   title: '调拨'
            // })

            if (resp.data[0].transferType && resp.data[0].transferType == 'reagent') {
              global.utils.openMenu('reagentTransfer', {id: resp.data[0].id})
            } else if (resp.data[0].transferType && resp.data[0].transferType == 'drugs') {
              /* eslint-disable */
              alert('未实现')
              /* eslint-disable */
            } else {
              global.utils.openMenu('transfer', {id: resp.data[0].id})
            }
            that.$refs.dataView.fetchData()
          }).catch(() => {
            that.$refs.dataView.fetchData()
          })
        }
      })
    },

    respondClose(applyAutos) {
      let that = this
      let params = {
        applyAutos,
        value: ''
      }
      this.utilVue.loadShow(true)
      this.$ajax.post('/dept/apply_auto/respondClose', params).then(resp => {
        this.utilVue.loadHide()
        that.$refs.dataView.fetchData()
        that.utilMessage.success('作废成功')
      })
    },
    //燃尽图的背景色和进度
    getColorAndProcess(data) {
      if (!data.skuQtyDaily) {
        return 'border:1px red solid;width:100%'
      }

      let bgcolor = this.getBgColor(data)
      return `background: ${bgcolor}; width: ${data.skuQtyStock / data.skuQtySafety * 100}%;`
    },
    getBorder(data) {
      let bgcolor = this.getBgColor(data)
      return `border:1px ${bgcolor} solid;`
    },
    getBgColor(data) {
      let bgcolor = null
      if (!data.skuQtyDaily) {
        bgcolor = 'red'
      } else if (data.skuQtyStock > data.skuQtySafety * 2 / 3) { //大于2/3，显示绿色
        bgcolor = 'green'
      } else if (data.skuQtyStock > data.skuQtySafety / 3) { //大于1/3，显示黄色
        bgcolor = 'yellow'
      } else {
        bgcolor = 'red'
      }
      return bgcolor
    }
  },
  computed: {
    cpCustomColumns() {
      const colums = []
      colums.push({
        name: 'burnOutTime',
        cmode: 'edit'
      })
      return colums
    }
  },
  props: ['propFlowKey'],
  mounted() {
    this.$refs.dataView.ocSetShowCheckBox(true)
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }
  .burnout {
    height: 20px;
    width: 100%;
    margin: 0;
  }
  .burnout>div {
    height: 100%;
  }

</style>
